<section class="demo-scroll-container">
  <div class="top-group">
    <d-button
      bsStyle="common"
      dStepsGuide
      [pageName]="'step-position-demo'"
      [steps]="steps"
      [stepIndex]="0"
      [zIndex]="1900"
      [dStepsGuidePosition]="'top-left'"
      (operateChange)="operateChange($event)"
      (click)="reset(0)"
    >
      Top-Left
    </d-button>
    <d-button
      bsStyle="common"
      dStepsGuide
      [pageName]="'step-position-demo'"
      [steps]="steps"
      [stepIndex]="1"
      [dStepsGuidePosition]="'top'"
      (operateChange)="operateChange($event)"
      (click)="reset(1)"
    >
      Top
    </d-button>
    <d-button
      bsStyle="common"
      dStepsGuide
      [pageName]="'step-position-demo'"
      [steps]="steps"
      [stepIndex]="2"
      [dStepsGuidePosition]="'top-right'"
      (operateChange)="operateChange($event)"
      (click)="reset(2)"
    >
      Top-Right
    </d-button>
  </div>
  <div class="left-group">
    <d-button
      bsStyle="common"
      dStepsGuide
      [pageName]="'step-position-demo'"
      [steps]="steps"
      [stepIndex]="7"
      [dStepsGuidePosition]="'left'"
      (operateChange)="operateChange($event)"
      (click)="reset(7)"
    >
      Left
    </d-button>
  </div>
  <div class="right-group">
    <d-button
      bsStyle="common"
      dStepsGuide
      [pageName]="'step-position-demo'"
      [steps]="steps"
      [stepIndex]="3"
      [dStepsGuidePosition]="'right'"
      (operateChange)="operateChange($event)"
      (click)="reset(3)"
    >
      Right
    </d-button>
  </div>
  <div class="bottom-group">
    <d-button
      bsStyle="common"
      dStepsGuide
      [pageName]="'step-position-demo'"
      [steps]="steps"
      [stepIndex]="6"
      [dStepsGuidePosition]="'bottom-left'"
      (operateChange)="operateChange($event)"
      (click)="reset(6)"
    >
      Bottom-Left
    </d-button>
    <d-button
      bsStyle="common"
      dStepsGuide
      [pageName]="'step-position-demo'"
      [steps]="steps"
      [stepIndex]="5"
      [dStepsGuidePosition]="'bottom'"
      (operateChange)="operateChange($event)"
      (click)="reset(5)"
    >
      Bottom
    </d-button>
    <d-button
      bsStyle="common"
      dStepsGuide
      [pageName]="'step-position-demo'"
      [steps]="steps"
      [stepIndex]="4"
      [dStepsGuidePosition]="'bottom-right'"
      (operateChange)="operateChange($event)"
      (click)="reset(4)"
    >
      Bottom-Right
    </d-button>
  </div>
</section>
